<template>
    <div>
        <inp1 @sousuochuanCan="sousuochuanCan" @tankuan1="tankuan1" @Exportbiaoge="Exportbiaoge"></inp1>
        <inp2 :arr="arr" @resetHome="initZrui" @Bianji="Bianji"></inp2>
        <inp3 @chengepageSize="chengepageSize" @chengepage="chengepage" :page="page" :pageSize="pageSize"
            :pageSizes="pageSizes" :total="total"></inp3>
        <!-- 弹框组件 -->
        <inp4 :btnType="btnType" v-if="show" :row="row" @guanbitankuang="guanbitankuang" @shuaxinbiaoge="initZrui">
        </inp4>

    </div>


</template>

<script>
import inp1 from './rui1/inp1.vue'
import inp2 from './rui1/inp2.vue'
import inp3 from './rui1/inp3.vue'
import inp4 from './rui1/inp4.vue'
//导出表格引入
import { export_json_to_excel } from '../../untial/Export2Excel'

import { zhurui } from '../../api/interface'

export default {


    components: {
        inp1,
        inp2,
        inp3,
        inp4

    },
    data() {
        return {
            btnType: 0,
            show: false,
            arr: [],
            row: {}, //保存编辑
            keyword: '',//查询的关键字
            keshi: '',//查询的科室
            page: 1, //当前页码
            pageSize: 10,
            total: 0,//总条数
            pageSizes: [10, 20, 40, 60, 80],

        }

    },
    mounted() {
        this.initZrui()
    },

    methods: {

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                return v[j]
            }))
        },



        chengepageSize(val) {
            this.pageSize = val
            this.initZrui()
            
        },
        chengepage(val) {
            this.page = val

            this.initZrui()
        },
        sousuochuanCan(val, val1) {
            this.keyword = val
            this.keshi1 = val1
            this.initZrui()


        },

        initZrui() {
            zhurui({ keyword: this.keyword, page: this.page, pageSize: this.pageSize, }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.arr = res.data
                    this.total = res.total
                }
                console.log(this.total);
                this.$emit('dongtaishuju',this.total) //动态总数传给数表

            })

        },

        //接受弹框
        tankuan1() {
            this.show = true
            this.btnType = 0
            this.row = {}

        },
        //关闭弹框
        guanbitankuang() {
            this.show = false

        },

        //编辑
        Bianji(row) {
            this.row = row
            this.show = true
            this.btnType = 1

        },

        //导出表格
        Exportbiaoge() {
            console.log('导出表格');
            //自定义的头部
            const tHeader = ['姓名', '就诊卡号', '身份证', '手机号', '挂号科室', '挂号类型', '挂号费', '挂号状态', '就诊日期', '候诊时间', '预约时间']
            //自定义的字段
            const filterVal = ['name', 'card', 'identity', 'phone', 'type', 'idd', 'cost', 'office', 'item', 'time1', 'time2']
            //根据自定义字段 筛选我需要的值
            const data = this.formatJson(filterVal, this.arr)

            export_json_to_excel({
                header: tHeader,//excel头部列表
                data,//数据
                filename: '患者信息表',//文件名称
                autoWidth: true,//自适应宽
                bookType: 'xlsx'//文件类型
            })




        }

    },


}
</script>



<style>
</style>